import { lazyBatchReport } from '../report/index'

/**
 * 统计和计算fcp: first-contentful-paint的时间
 * FCP: 首次内容绘制时间
 * 表示页面首次渲染出有意义的内容的时间
 * FCP 关注的是 DOM 内容的变化，如文本、图片、非空白的 <canvas> 或 <svg> 元素
 */
export default function observerFCP() {
  const entryHandler = (list) => {
    for (const entry of list.getEntries()) {
      if (entry.name === 'first-contentful-paint') {
        observer.disconnect() // 断开连接

        const json = entry.toJSON()

        const reportData = {
          ...json,
          type: 'performance',
          subType: entry.name,
          pageUrl: window.location.href,
        }

        // 数据上报
        lazyBatchReport(reportData)
      }
    }
  }

  const observer = new PerformanceObserver(entryHandler)

  // 监听paint类型的性能事件，buffered 为 true 表示确保观察到所有的paint事件
  observer.observe({ type: 'paint', buffered: true })
}
